/*
 * @Description:
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-03-31 11:58:58
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-04-28 16:39:43
 */
import { useCommonStore } from '@/stores/common'

export default defineComponent({
	name: 'DictTags',
	props: {
		value: {
			type: [String, Number, Boolean],
		},
		item: {
			type: Object,
			default: () => ({}),
		},
		code: {
			type: String,
		},
	},
	setup(props, { slots, attrs, emit }) {
		const { dictList } = storeToRefs(useCommonStore())

		const dictTags = computed(() => {
			const data = Array.isArray(dictList.value) ? dictList.value : dictList.value[props.code] || props.item.dicData || []
			return data.map((item) => {
				let style = {}
				switch (item.remarks) {
					case 'success':
						style = {
							background: 'rgba(0, 168, 112, 0.2)',
							color: '#00A870',
						}
						break
					case 'info':
						style = {
							background: 'rgb(0 0 0 / 16%)',
							color: '#1c1c28d1',
						}
						break
					case 'primary':
						style = {
							background: 'rgba(105, 158, 245, 0.2)',
							color: '#699EF5',
						}
						break
					case 'danger':
						style = {
							background: 'rgba(250, 62, 62, 0.2)',
							color: '#FA3E3E',
						}
						break
					case 'warning':
						style = {
							background: 'rgba(237, 123, 47, 0.2)',
							color: '#ED7B2F',
						}
						break
					case 'purple':
						style = {
							background: '#EFE4F8',
							color: '#8241B5',
						}
						break
					default:
						style = undefined
						break
				}
				return {
					...item,
					style,
				}
			})
		})

		const dictValue = Array.isArray(props.value) ? props.value : typeof props.value === 'boolean' ? props.value : `${props.value}`

		const dicTempList = dictTags.value
			.map((item) => {
				if (dictValue == item.label || dictValue == item.value) {
					if (item.style) {
						return (
							<el-tag
								class="mr8 tag_text_part"
								type={item.type}
								style={{
									...item.style,
									border: 'none',
									'--overflow-width': '500px',
									'--line-clamp': 2,
									'white-space': 'nowrap',
									overflow: 'hidden',
									'text-overflow': 'ellipsis',
								}}
							>
								{item.label}
							</el-tag>
						)
					} else {
						return <p class="mr8 tag_text_part">{item.label}</p>
					}
				}
			})
			.filter(Boolean)

		return () => {
			if (dicTempList.length > 0) {
				return <div style="display:flex;flex-flow:row wrap;">{dicTempList}</div>
			} else if (props.value || props.value == 0) {
				return <span>{props.value}</span>
			} else {
				return <span>/</span>
			}
		}
	},
})
